import React, { useState, Suspense, lazy } from 'react';
import { Routes, Route, Navigate, NavLink, useLocation } from 'react-router-dom';
const Home = lazy(() => import('@/views/Home'));
const Login = lazy(() => import('@/views/Login'));
const Gitee = lazy(() => import('@/layout/Gitee'));
const YinXinag = lazy(() => import('@/layout/YinXinag'));
const Study = lazy(() => import('@/layout/Study'));
const Study1 = lazy(() => import('@/layout/Study1'));
const Study2 = lazy(() => import('@/layout/Study2'));
const Study3 = lazy(() => import('@/layout/Study3'));
const Study4 = lazy(() => import('@/layout/Study4'));
const Study5 = lazy(() => import('@/layout/Study5'));
const Calendars = lazy(() => import('@/layout/Calendars'));
const Classes = lazy(() => import('@/layout/Classes'));
const Tours = lazy(() => import('@/layout/Tours'));
const Test1 = lazy(() => import('@/layout/Test1'));
const Test2 = lazy(() => import('@/layout/Test2'));
const Test3 = lazy(() => import('@/layout/Test3'));
const Slots = lazy(() => import('@/layout/Slots'));
const Slot1 = lazy(() => import('@/layout/Slot1'));
const Slot2 = lazy(() => import('@/layout/Slot2'));
const Slot3 = lazy(() => import('@/layout/Slot3'));
const ListSCroll = lazy(() => import('@/layout/ListScroll'));
const ShowEcharts = lazy(() => import('@/layout/ShowEcharts'));
const HomePage = lazy(() => import('@/layout/HomePage'));
const ListPage = lazy(() => import('@/layout/ListPage'));
import AuthRoute from '@/components/AuthRoute';
const RouteAll = () => {
    // 懒加载组件
    const routes = [
        {
            path: '/',
            name: 'login',
            element: <Navigate to='/login' />,
            meta: {
                title: '/',
            },
        },
        {
            path: '/home',
            name: 'home',
            element: <Home />,
            meta: {
                title: '首页',
            },
            children: [
                {
                    path: 'gitee',
                    name: 'gitee',
                    element: <Gitee />,
                    meta: {
                        title: 'gitee',
                    },
                    children: [
                        {
                            path: 'test1',
                            name: 'test1',
                            element: <Test1 />,
                            meta: {
                                title: '首页',
                            },
                        },
                        {
                            path: 'test2',
                            name: 'test2',
                            element: <Test2 />,
                            meta: {
                                title: '首页',
                            },
                        },
                        {
                            path: 'test3',
                            name: 'test3',
                            element: <Test3 />,
                            meta: {
                                title: '首页',
                            },
                        },
                    ]
                },
                {
                    path: 'study',
                    name: 'study',
                    element: <Study />,
                    meta: {
                        title: 'study',
                    },
                    children: [
                        {
                            path: 'study1',
                            name: 'study1',
                            element: <Study1 />,
                            meta: {
                                title: '',
                            },
                        },
                        {
                            path: 'study2',
                            name: 'study2',
                            element: <Study2 />,
                            meta: {
                                title: '首页',
                            },
                        },
                        {
                            path: 'study3',
                            name: 'study3',
                            element: <Study3 />,
                            meta: {
                                title: '首页',
                            },
                        },
                        {
                            path: 'study4',
                            name: 'study4',
                            element: <Study4 />,
                            meta: {
                                title: '首页',
                            },
                        },
                        {
                            path: 'study5',
                            name: 'study5',
                            element: <Study5 />,
                            meta: {
                                title: '首页',
                            },
                        },
                    ]
                },
                {
                    path: 'yinxiang',
                    name: 'yinxiang',
                    element: <YinXinag />,
                    meta: {
                        title: 'yinxiang',
                    }
                },
                {
                    path: 'calendars',
                    name: 'calendars',
                    element: <Calendars />,
                    meta: {
                        title: 'calendars',
                    },
                    requiresAuth: true
                },
                {
                    path: 'tours',
                    name: 'tours',
                    element: <Tours />,
                    meta: {
                        title: 'tours',
                    },
                    requiresAuth: true
                },
                {
                    path: 'classes',
                    name: 'classes',
                    element: <Classes name='haha' age='20' />,
                    meta: {
                        title: 'classes',
                    },
                },
                {
                    path: 'slots',
                    name: 'slots',
                    element: <Slots name='haha' age='20' />,
                    meta: {
                        title: 'slots',
                    },
                },
                {
                    path: 'slot1',
                    name: 'slot1',
                    element: <Slot1 name='haha' age='20' />,
                    meta: {
                        title: 'slot1',
                    },
                },
                {
                    path: 'slot2',
                    name: 'slot2',
                    element: <Slot2 name='haha' age='20' />,
                    meta: {
                        title: 'slot2',
                    },
                },
                {
                    path: 'slot3',
                    name: 'slot3',
                    element: <Slot3 name='haha' age='20' />,
                    meta: {
                        title: 'slot3',
                    },
                },
                {
                    path: 'ListSCroll',
                    name: 'ListSCroll',
                    element: <ListSCroll />,
                    meta: {
                        title: 'ListSCroll',
                    },
                },
                {
                    path: 'ShowEcharts',
                    name: 'ShowEcharts',
                    element: <ShowEcharts />,
                    meta: {
                        title: 'ShowEcharts',
                    },
                },
                {
                    path: 'HomePage',
                    name: 'HomePage',
                    element: <HomePage />,
                    meta: {
                        title: 'HomePage',
                    },
                },
                {
                    path: 'ListPage',
                    name: 'ListPage',
                    element: <ListPage />,
                    meta: {
                        title: 'ListPage',
                    },
                },
            ]
        },
        {
            path: '/login',
            name: 'login',
            element: <Login />,
            meta: {
                title: 'login',
            },
        },
        {
            path: '*',
            name: 'login',
            element: <Login />,
            meta: {
                title: 'login',
            },
        }
    ];

    const renderRoute = (route) => {
        // const accessToken = localStorage.getItem('accessToken');
        // console.log('accessToken', accessToken)
        // console.log('renderRoute', route.element, route.path)
        // if (!accessToken && route.path !== '/login' && route.path !== '/') {
        //     console.log('Navigate', route.path)
        //     return <Navigate to='/login' />;
        // }
        if (route.requiresAuth) {
            return <AuthRoute requiresAuth>{route.element}</AuthRoute>
        }
        return route.element;
    };

    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Routes>
                {routes.map((route) => (
                    <Route key={route.path} path={route.path} element={renderRoute(route)} >
                        {route.children && <Route index element={<Navigate to={route.children[0].path} />}></Route>}
                        {
                            route.children && (route.children.map(child => {
                                // return <Route index={index === 0 ? true : false} key={child.path} path={child.path} element={renderRoute(child)}></Route>
                                return <Route key={child.path} path={child.path} element={renderRoute(child)} >
                                    {child.children && <Route index element={<Navigate to={child.children[0].path} />}></Route>}
                                    {
                                        child.children && (child.children.map(child1 => {
                                            return <Route key={child1.path} path={child1.path} element={renderRoute(child1)}></Route>
                                        }))
                                    }
                                </Route>

                            }))
                        }
                    </Route>
                ))
                }
                {/* <Route path='/' element={<Navigate to='/login' />}></Route>
                <Route path='/login' element={<Login />}></Route>
                <Route path='/home' element={<Home />}>
                    <Route index element={<Navigate to='gitee' />}></Route>
                    <Route path='gitee' element={<Gitee />}>
                        <Route index element={<Navigate to='test1' />}></Route>
                        <Route path='test1' element={<Test1 />}></Route>
                        <Route path='test2' element={<Test2 />}></Route>
                        <Route path='test3' element={<Test3 />}></Route>
                    </Route>
                    <Route path='YinXinag' element={<YinXinag />}></Route>
                </Route> */}
            </Routes>
        </Suspense >
    );
};

export default RouteAll;